<style scoped>
  .layout-con {
    height: 100%;
    width: 100%;
  }

  .menu-item span {
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }

  .menu-item i {
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }

  .collapsed-menu span {
    width: 0px;
    transition: width .2s ease;
  }

  .collapsed-menu i {
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
  }

  .title-top-center {
    text-align: center;

  }

  .title-top-right {
    float: right
  }

  .btn_tools {
    padding: 6px 10px 6px 10px;
    background: #eee;
    border-radius: 20px;
  }

  .ivu-cell-extra {
    color: #ed4014;
  }
</style>
<template>
  <Row type="flex" justify="center" align="top" class="code-row-bg">
    <Col id="staff1" span="1" :style="phoneStyle?{background:'#ffffff',height:'50px',borderTop: '1px solid #cccccc'}:{background:'#3F88D5',height:'100vh'}">
      <NavLeft :selected="2" :avatar="avatar"></NavLeft>
    </Col>
    <Col id="staff2" span="4" v-if="dw">
      <NavMiddle @dwShow="dwShow" :itemList="itemList"></NavMiddle>
    </Col>
    <Col id="staff3" span="19" style="background:#f5f7f9;height:100vh;">
      <Layout>
        <Content :style="{padding: '0 16px 16px'}">
          <div class="staffIndex">
            <div class="sta_title">
              <span class="phoneBack"
                    style="font-size: 16px;color: rgb(70, 76, 91);line-height: 36px;cursor: pointer"
                    @click="backIndex" v-if="showBack"><Icon type="ios-arrow-back"/>返回</span>
              <span class="st_font">员工端</span>
              <div class="time">
                <DatePicker :size="phoneStyle?'small':'large'" type="date" placeholder="选择日期" :editable="false"
                            :clearable="false"
                            :value="chooseDate" @on-change="dateChange"></DatePicker>
              </div>
              <div class="st_button">
                <Icon type="ios-cog"/>
              </div>
            </div>
            <div class="sta_content">
              <div class="sta_con" v-for="(item,index) in conList" :key="index" @click="toDetail(item)">
                <Card class="sc_card">
                  <div class="scc_left">
                    <div class="sccl_top">
                      {{item.name}}
                      <div class="scclt_err">{{item.notes}}</div>
                    </div>
                    <div class="sccl_bottom">
                      <div class="sb_labs">{{item.lable}}</div>
                    </div>
                  </div>
                  <!-- 成本记录 -->
                  <div class="scc_right" v-if="item.type == 0">
                    <div class="sccr_icon" v-if="item.notes == undefined"><img
                        src="../../../assets/img/icons/1T.png"/></div>
                    <div class="sccr_icon" v-else><img src="../../../assets/img/icons/1F.png"/></div>
                  </div>
                  <!-- 异常停机 -->
                  <div class="scc_right" v-if="item.type == 1">
                    <div class="sccr_icon" v-if="item.notes == undefined"><img
                        src="../../../assets/img/icons/2T.png"/></div>
                    <div class="sccr_icon" v-else><img src="../../../assets/img/icons/2F.png"/></div>
                  </div>
                  <!-- 设备点检 -->
                  <div class="scc_right" v-if="item.type == 2">
                    <div class="sccr_icon" v-if="item.notes == undefined"><img
                        src="../../../assets/img/icons/3T.png"/></div>
                    <div class="sccr_icon" v-else><img src="../../../assets/img/icons/3F.png"/></div>
                  </div>
                  <!-- 防呆点检1、防呆点检2 -->
                  <div class="scc_right" v-if="item.type == 3 || item.type == 4">
                    <div class="sccr_icon" v-if="item.notes == undefined"><img
                        src="../../../assets/img/icons/4T.png"/></div>
                    <div class="sccr_icon" v-else><img src="../../../assets/img/icons/4F.png"/></div>
                  </div>
                  <!-- 夹具点检 -->
                  <div class="scc_right" v-if="item.type == 5">
                    <div class="sccr_icon" v-if="item.notes == undefined"><img
                        src="../../../assets/img/icons/6T.png"/></div>
                    <div class="sccr_icon" v-else><img src="../../../assets/img/icons/6F.png"/></div>
                  </div>
                  <!-- 尺寸检查 -->
                  <div class="scc_right" v-if="item.type == 6">
                    <div class="sccr_icon" v-if="item.notes == undefined"><img
                        src="../../../assets/img/icons/7T.png"/></div>
                    <div class="sccr_icon" v-else><img src="../../../assets/img/icons/7F.png"/></div>
                  </div>
                  <!-- 现场检查 -->
                  <div class="scc_right" v-if="item.type == 7">
                    <div class="sccr_icon" v-if="item.notes == undefined"><img
                        src="../../../assets/img/icons/8T.png"/></div>
                    <div class="sccr_icon" v-else><img src="../../../assets/img/icons/8F.png"/></div>
                  </div>
                  <!-- 安全检查 -->
                  <div class="scc_right" v-if="item.type == 8">
                    <div class="sccr_icon" v-if="item.notes == undefined"><img
                        src="../../../assets/img/icons/9T.png"/></div>
                    <div class="sccr_icon" v-else><img src="../../../assets/img/icons/9F.png"/></div>
                  </div>
                  <!-- 焊缝检查 -->
                  <div class="scc_right" v-if="item.type == 9">
                    <div class="sccr_icon" v-if="item.notes == undefined"><img
                        src="../../../assets/img/icons/2T.png"/></div>
                    <div class="sccr_icon" v-else><img src="../../../assets/img/icons/2F.png"/></div>
                  </div>
                  <!-- 稼动率 -->
                  <div class="scc_right" v-if="item.type == 10">
                    <div class="sccr_icon" v-if="item.notes == undefined"><img
                        src="../../../assets/img/icons/3T.png"/></div>
                    <div class="sccr_icon" v-else><img src="../../../assets/img/icons/3F.png"/></div>
                  </div>
                  <!-- 生产效率 -->
                  <div class="scc_right" v-if="item.type == 11">
                    <div class="sccr_icon" v-if="item.notes == undefined"><img
                        src="../../../assets/img/icons/1T.png"/></div>
                    <div class="sccr_icon" v-else><img src="../../../assets/img/icons/1F.png"/></div>
                  </div>
                  <!-- 开班记录 -->
                  <div class="scc_right" v-if="item.type == 12">
                    <div class="sccr_icon" v-if="item.notes == undefined"><img
                        src="../../../assets/img/icons/10T.png"/></div>
                    <div class="sccr_icon" v-else><img src="../../../assets/img/icons/10F.png"/></div>
                  </div>
                </Card>
              </div>
            </div>
          </div>
        </Content>
      </Layout>
    </Col>
  </Row>
</template>
<script>
  import cookie from 'js-cookie';
  import NavLeft from '@/components/NavLeft';
  import NavMiddle from '@/components/NavMiddle';

  export default {
    data() {
      return {
        isCollapsed: false,
        itemList: [],
        conList: [],
        unit_id: "",
        avatar: "",
        isAdmin: cookie.get('isAdmin'),
        dw: true,
        phoneStyle: false,
        showBack: false,
        isWechat: false,
        chooseDate: cookie.get('chooseDate'),
      };
    },
    name: 'staffIndex',
    components: {NavLeft: NavLeft, NavMiddle: NavMiddle},
    watch: {
      $route(val) {
        this.getData();
        this.getDataInfo();
      },
    },
    created() {
      let self = this
      window.document.title = 'SCS';
      this.getData();
      this.getDataInfo();
      let dw = document.body.clientWidth
      if (dw < 820) {
        self.showBack = true
        if (self.$route.query.phoneDetail != undefined) {
          self.dw = false
        }
      } else {
        self.showBack = false
      }
      let dw2 = document.body.clientWidth
      if (dw2 < 450) {
        self.phoneStyle = true
      } else {
        self.phoneStyle = false
      }
      self.isWechat = !self.$twjsdes.isWechat()
      if (cookie.get('chooseDate') == undefined || cookie.get('chooseDate') == null || cookie.get('chooseDate') == '') {
        let date = new Date();
        let seperator1 = "-";
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        let currentdate = year + seperator1 + month + seperator1 + strDate;
        cookie.set('chooseDate', currentdate);
      }
      if (cookie.get('isAdmin') == 2) {
        cookie.set('uid','')
        cookie.set('token','')
      }
    },
    methods: {
      getData() {
        var uid = cookie.get('uid');
        var token = cookie.get('token');
        if (!uid || !token) {
          //this.$Message.warning('请登录');
          //store.dispatch('setLoginStatus', 0)
          //window.location.reload()
        }
        this.$Loading.start();
        var str = {type: 'login', loginType: cookie.get('loginType'),ymd: this.chooseDate};
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/item/home', {alldata: strdata.alldata}).then((response) => {
          this.$Loading.finish();
          var res = this.$twjsdes.decrypt(response.data.alldata);
          console.log(res,'员工端')
          if (res.status == -1 && res.data.backurl) {
            this.$Modal.warning({
              title: '提示',
              content: '请在企业微信授权登录后使用',
              onOk: () => {
                if (this.$twjsdes.isWechat() === true) {
                  window.location.href = res.data.backurl_oauth2
                } else {
                  window.location.href = res.data.backurl
                }
              }
            });

          } else if (res.status != 1) {
            this.$Message.error(res.msg);
          } else {
            this.itemList = res.data.list;
            this.avatar = res.data.avatar;
          }
          // console.log(res.data.brands);
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
      getDataInfo() {
        let self = this
        var uid = cookie.get('uid');
        var str = {
          uid: uid,
          unit_id: this.$route.query.id,
          ymd: self.chooseDate,
          loginType: cookie.get('loginType')
        };
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/item/Staff', {alldata: strdata.alldata}).then((response) => {
          this.$Loading.finish();
          let res = this.$twjsdes.decrypt(response.data.alldata);
          // console.log(res)
          //判断是否是微信进入，如果是，焊缝、尺寸不显示
          let list = []
          for (let i = 0; i < res.data.list.length; i++) {
            if (res.data.list[i].statis_id == 33 || res.data.list[i].statis_id == 32) {
              if (self.isWechat) {
                list.push(res.data.list[i])
              }
            } else {
              list.push(res.data.list[i])
            }
          }
          self.conList = list
          // console.log(res.data.list,'res')
        })
      },
      toDetail(item) {
        let self = this
        if (self.$route.query.id == '999' || self.$route.query.id == undefined) {
          this.$Message.error('未选择班组');
          return
        }
        let unit_id = this.$route.query.id
        if (item.statis_id == 13) { //异常停机
          self.$router.push({
            path: '/item/staff/staffDetail_yichang',
            query: {statis_id: item.statis_id, title: item.name, id: unit_id}
          })
        } else if (item.statis_id == 32 && self.isWechat) { //焊缝
          self.$router.push({
            path: '/item/staff/staffDetail_hanfeng',
            query: {statis_id: item.statis_id, title: item.name, id: unit_id}
          })
        } else if (item.statis_id == 33 && self.isWechat) { //尺寸
          self.$router.push({
            path: '/item/staff/staffDetail_chicun',
            query: {statis_id: item.statis_id, title: item.name, id: unit_id}
          })
        } else if (item.statis_id == 61 || item.statis_id == 69 || item.statis_id == 70 || item.statis_id == 60 || item.count_way == 19 || item.count_way == 15 || item.count_way == 16 || item.count_way == 20) { //防呆、设备、夹具、模具点检
          self.$router.push({
            path: '/item/staff/YuanGongZiJian/staffDetail_ygzj',
            query: {statis_id: item.statis_id, title: item.name, id: unit_id,countWay: item.count_way}
          })
        } else {
          self.$router.push({
            path: '/item/staff/staffDetail',
            query: {statis_id: item.statis_id, title: item.name, id: unit_id}
          })
        }
      },
      dwShow(val) {
        let self = this
        self.dw = val
      },
      backIndex() {
        let self = this
        self.dw = true
      },
      dateChange(val) {
        let self = this
        self.chooseDate = val
        cookie.set('chooseDate', val)
        self.getDataInfo()
      },
    },
    computed: {
      menuitemClasses: function () {
        return [
          'menu-item',
          this.isCollapsed ? 'collapsed-menu' : ''
        ]
      }
    },
  }
</script>
<style lang="less">
  .staffRight {
    width: 100%;
    padding-bottom: 50px;
    height: 100%;
    overflow-y: auto;
  }

  @media screen and (min-width: 850px) and (max-width: 1400px) {
    .staffLeft {
      display: none;
    }
  }

  .staffIndex {
    display: flex;
    flex-direction: column;
    .sta_title {
      display: flex;
      flex-direction: row;
      justify-content: center;
      position: relative;
      margin: 16px 0;
      width: 100%;
      height: 36px;
      line-height: 36px;
      .phoneBack {
        position: absolute;
        left: 0;
        top: 0;
      }
      .st_font {
        font-size: 14px;
        color: #222222;
      }
      .time{
        position: absolute;
        right: 50px;
        top: 0px;
      }
      .st_button {
        position: absolute;
        right: 0;
        top: 4px;
        width: 38px;
        height: 28px;
        line-height: 27px;
        text-align: center;
        background: #e8e8e8;
        border-radius: 20px;
        cursor: pointer;
        .ivu-icon {
          color: #666666;
          font-size: 20px;
        }
      }
      .st_button:hover {
        .ivu-icon {
          color: #57a3f3;
          transition: color .2s ease;
        }
      }
    }
    .sta_content {
      width: 100%;
      max-height: 53rem;
      overflow-y: auto;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .sta_con {
        width: 24%;
        height: 110px;
        margin-right: 1%;
        margin-top: 16px;
        .sc_card {
          width: 100%;
          height: 100%;
          cursor: pointer;
          .ivu-card-body {
            width: 100%;
            height: 100%;
            padding: 0;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 15px;
            box-sizing: border-box;
            background: #fff;
            .scc_left {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              .sccl_top {
                font-size: 15px;
                color: #222222;
                display: flex;
                flex-direction: column;
                .scclt_err {
                  font-size: 12px;
                  color: #f15c60;
                }
              }
              .sccl_bottom {
                display: flex;
                flex-direction: row;
                .sb_labs {
                  padding: 4px 9px;
                  font-size: 11px;
                  color: #222222;
                  background: #f9f9f9;
                  border: 1px solid #e5e5e5;
                  border-radius: 2px;
                  margin-right: 5px;
                }
              }
            }
            .scc_right {
              display: flex;
              flex-direction: column;
              justify-content: flex-start;
              .sccr_icon {
                width: 28px;
                height: 28px;
                border-radius: 50%;
                overflow: hidden;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }
      .sta_con:nth-child(1), .sta_con:nth-child(2), .sta_con:nth-child(3), .sta_con:nth-child(4) {
        margin-top: 0;
      }
    }
  }

  @media screen and (min-width: 0px) and (max-width: 850px) {
    #staff1 {
      position: fixed;
      left: 0;
      bottom: 0;
      z-index: 99;
      width: 100%;
      height: 50px !important;
    }

    #staff2 {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: #fff;
      z-index: 98;
    }

    #staff3 {
      width: 100%;
    }
  }

  @media screen and (min-width: 0px) and (max-width: 820px) {
    .sta_title {
      margin: 16px 0 0 0 !important;
    }

    .sta_con {
      width: 49% !important;
      margin-top: 8px !important;
    }

    .sta_con:nth-child(odd) {
      margin-right: 2% !important;
    }

    .sta_con:nth-child(even) {
      margin-right: 0 !important;
    }

    .time{
      width: 6.5rem !important;
      right: 12% !important;
    }
  }
</style>

